<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        #fdj{
            position: relative;
            width:450px;
            height: 450px;
        }
        #fdj img{
            width: 100%;
            height: 100%;
        }
        #fdj #mengban{
            position: absolute;
            width: 225px;
            height: 225px;
            background-color: yellow;
            opacity: 0.4;
            left: 0;
            top: 0;
            cursor: move;
            display: none;
        }
        #fdj #fdjbox{
            position: absolute;
            width: 450px;
            height: 450px;
            left: 450px;
            top: 0;
            background-image: url("../day9/66066a85cec2e.webp");
            background-repeat: no-repeat;
            background-size: 200% 200%;
            display: none;
        }
    </style>
</head>
<body>
 <div id="fdj">
     <img src="../day9/66066a85cec2e.webp">
     <div id="mengban"></div>
     <div id="fdjbox"></div>
 </div>

<script>
    //window.onload浏览器页面加载完成后触发
    window.onload =function (){
      var fdj =document.getElementById('fdj')
      var img =document.getElementsByTagName('img')[0];
      var mengban =document.getElementById('mengban')
      var fdjbox =document.getElementById('fdjbox')
      //给放大镜，设置一个鼠标移动时触发事件
      fdj.onmousemove =function (e){
          //计算蒙版到放大镜的距离，为bian
           console.log(e.target.width)
          var left = e.clientX - img.width/2/2
          var top = e.clientY - img.height/2/2
          //边缘检测，上下左右四条边越界问题
          //从左边框越界
          if(left <0) {left = 0}
          //从上边框越界
          if (top <0) {top = 0}
          //从右边框越界
          if(left >225){left = 225}
          //从下边框越界
          if(top >225){top =225}
          //设置蒙版的位置
          mengban.style.left=left+'px'
          mengban.style.top=top+'px'
        //显示蒙版,蒙版是如何隐藏就如何显示
        mengban.style.display='block'
          //调整位置
          fdjbox.style.backgroundPosition=(-2 * left) + 'px '+ (-2 * top) + 'px'
          //显示fjdbox
          fdjbox.style.display='block'
      }
      //鼠标从指定对象移出时触发改事件
      fdj.onmouseout =function (){
          mengban.style.display='none';
          fdjbox.style.display='none'
      }
    }
</script>
</body>
</html>